<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
</head>
<body>
<div id="test"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*告诉babel.js解析里面的jsx的代码*/

    function UserGreeting(props) {

        return <h1>欢迎回来</h1>;
    }
    
    function GuestGreeting(props) {

        return <h1>请去登录</h1>;
    }

    function Greeting(props) {

        const isLogin = props.isLogin;

        if(isLogin){
            return <UserGreeting/>
        }else {
            return <GuestGreeting/>
        }
    }

    function LoginButton(props) {
        return (
                <button onClick={props.onClick}>
                    登陆
                </button>
        );
    }

    function LogoutButton(props) {
        return (
                <button onClick={props.onClick}>
                    退出
                </button>
        );
    }


    class LoginControl extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                isLogin:false
            }
            this.handerLoginClick = this.handerLoginClick.bind(this);
            this.handlerLogoutClick = this.handlerLogoutClick.bind(this);
        }

        handlerLogoutClick(){
            this.setState({isLogin : false});
        }

        handerLoginClick(){
            this.setState({isLogin : true});
        }

        render(){
            const isLogin = this.state.isLogin;
            let button;
            if(isLogin){
                button = <LogoutButton onClick={this.handlerLogoutClick} />
            }else {
                button = <LoginButton onClick={this.handerLoginClick} />
            }
            return(
                <div>
                    <Greeting isLogin ={isLogin}/>
                    {button}
                </div>
            );
        }
}

// 2. 将虚拟DOM渲染到页面真实DOM容器中
ReactDOM.render(<LoginControl />, document.getElementById('test'))
</script>
</body>
</html>